<template>
    <div>
        <h1>代办事项列表</h1>
        <input type="text" v-model="newTodo" />
        <button @click="addTodo">添加</button>
        <ul>
            <li v-for="todo in filteredTodos" :key="todo.id">
                <span :class="{'completed': todo.completed}">{{ todo.text }}</span>
                <button @click="markCompleted(todo)">完成</button>
            </li>
        </ul>
        <div>
            <button @click="filtedStatus('all')">全部</button>
            <button @click="filtedStatus('completed')">已完成</button>
            <button @click="filtedStatus('uncompleted')">未完成</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'XuanXiang',
    data() {
        return {
            newTodo: '',
            todos: [],
            filterStatus: 'all'
        }
    },
    methods: {
        addTodo() {
                const newId = this.todos.length +1
                const newTodo = {
                    id: newId,
                    text: this.newTodo,
                    completed: false
                }
                this.todos.push(newTodo);
                this.newTodo = '';
            },
        markCompleted(todo) {
            todo.completed = !todo.completed;
        },
        filtedStatus(status) {
            this.filterStatus = status;
        }
    },
    computed: {
        filteredTodos() {
            if (this.filterStatus === 'all') {
                return this.todos;
            } else if (this.filterStatus === 'completed') {
                return this.todos.filter(todo => todo.completed);
            } else if (this.filterStatus === 'uncompleted') {
                return this.todos.filter(todo => !todo.completed);
            }
        }
    }
}
</script>